/**
`useEffect`  是 React 中的一个 Hook，用于在函数组件中处理副作用（side effects）。副作用可以是数据获取、订阅、手动操作 DOM 等。
  1. 基本概念
  -  `useEffect`  允许你在函数组件中执行副作用代码。它在组件渲染后执行，并可以选择在组件卸载时清理副作用。
  -  `useEffect`  接收两个参数：第一个是副作用函数，第二个是依赖数组（可选）。

  2. 使用方式
   1. 引入  `useEffect` 

  首先需要从 React 中引入  `useEffect` ：
  import React, { useEffect } from 'react';
   2. 基本用法

  在组件中使用  `useEffect` ：
  useEffect(() => {
    // 这里是副作用代码
    console.log('Component mounted or updated');

    // 可选的清理函数
    return () => {
      console.log('Component unmounted or before next effect');
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行
  3. 依赖数组
  - 空数组  `[]` ：副作用只在组件挂载和卸载时执行。
  - 有依赖项的数组  `[dep1, dep2]` ：副作用在组件挂载时执行，并在依赖项变化时重新执行。
  - 不传依赖数组：副作用在每次渲染后执行。

   示例：
  const Example = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
      console.log(`Count is: ${count}`);

      return () => {
        console.log('Cleaning up...');
      };
    }, [count]); // 依赖于 count，count 改变时重新执行
  };
  4. 常见用法
  - 数据获取：在组件挂载时从 API 获取数据。
  - 事件监听：在组件挂载时添加事件监听器，并在卸载时清理。
  - 定时器：设置定时器并在组件卸载时清理。

  5. 注意事项
  - 性能：在依赖数组中列出所有需要监控的变量，以避免不必要的重新渲染和副作用执行。
  - 清理副作用：如果副作用需要清理（如订阅、定时器），确保返回一个清理函数。
  - 避免无限循环：确保依赖数组中的变量不会导致无限循环调用  `useEffect` 。

  6. 总结
  `useEffect`  是一个强大的 Hook，用于处理函数组件中的副作用。通过合理使用  `useEffect` ，可以有效地管理数据获取、事件监听和其他副作用，使得组件更具响应性和可维护性。理解  `useEffect`  的工作原理和使用方式是掌握 React 的重要一步。
 */
import React, { memo } from 'react'
import MyUseEffectClass from './components/01MyUseEffectClass'
import MyUserEffectHook from './components/02MyUserEffectHook'
import MyUserEffectCallback from './components/03MyUserEffectCallback'
import MyMultiUseEffect from './components/04MyMultiUseEffect'
import MyControlUseEffect from './components/05MyControlUseEffect'

const App = memo(() => {
  return (
    <div>
      <h3>01_修改标题-class实现</h3>
      <MyUseEffectClass />
      
      <h3>02_修改标题-hook实现</h3>
      <MyUserEffectHook />

      <h3>03_清除机制-返回回调函数</h3>
      <MyUserEffectCallback />

      <h3>04_逻辑分离-多个Effect</h3>
      <MyMultiUseEffect />

      <h3>05_控制执行-依赖项</h3>
      <MyControlUseEffect />
    </div>
  )
})

export default App
